<template>
 <!-- 头部 -->
  <el-row class="container">
    <el-col :span='6' class="header-wrapper">
      <!-- logo -->
      <div class="logo">
         <h1>智慧河长制综合管理平台</h1>
      </div>
    </el-col>
    <el-col :span="13">
      <div class="top-nav">
        <el-row>
          <el-col :span='24'>
            <el-menu :default-active="defaultActiveIndex" mode="horizontal" :router="true" @select="handleSelect">
              <span class="ico-nav"><i class="iconfont icon-liebiao"></i></span>
              <el-menu-item index="/">信息总览</el-menu-item>
              <el-menu-item index="/monitor">河湖监测</el-menu-item>
              <el-menu-item index="/affair">河长事务管理</el-menu-item>
              <el-menu-item index="/manage">河湖管理</el-menu-item>
              <el-menu-item index="/statis">统计分析</el-menu-item>
              <el-menu-item index="/system">系统管理</el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </div>
    </el-col>
    <el-col :span="5">
      <div class="hd-account">
        <p class="usr"><i class="iconfont icon-user"></i><span>{{uname}}</span>,欢迎您！</p>
        <!-- <el-button type="text" class="hd-btn"><i class="iconfont icon-lingdang"></i></el-button>   -->
        <el-button type="text" class="hd-btn" @click="logout"><i class="iconfont icon-tuichu5"></i></el-button>  
      </div>
    </el-col>
  </el-row>
</template>
<script>
export default {
  name:'Header',
  data(){
    return{
      defaultActiveIndex:'/',
      uname:''
      }
  },
  mounted(){  
    this.uname=JSON.parse(window.localStorage.getItem('user')).value.userName
  },
  methods:{
    handleSelect(index){
      this.defaultActiveIndex=index
    },
    //退出登录
    logout(){
      let that = this;
      this.$confirm('确定要退出吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //确定退出
        window.localStorage.removeItem("authToken");
        window.localStorage.removeItem("user");
        that.$router.push('/login')
      }).catch(() => {});
    }
  }
}
</script>
<style>

</style>
